<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body onload="loaded();">
<div>
    <h1>Choose local file or enter stream uri:</h1>
</div>
<input id='uri' style='width: 400px;' type='text'>
<input id='localFile' type='file' value="e:\\wfsroot\\somebody.mp4"><br>
<label id='pos'></label>
<button onclick='play()'>Play</button>
<button onclick='togglePause()'>Pause</button>
<button onclick='stop()'>Stop</button>

<div>
 <canvas id='cnv' width=1280 height=534>
 </canvas>
 <div id='seekBar' style='background-color: black; width: 1280px; height: 5px; overflow: hidden; cursor: pointer;'>
   <div id='progressBar' style='background-color: blue; width: 0%; height:5px'></div>
 </div>
</div>
<script>
    var
       Player = require('nw-f2cwa-play').Player,
       player;
    function loaded(){
        localFile.addEventListener('change',function(){
           if(localFile.files.length){
               uri.value = localFile.files[0].path;
           }
        });
        seekBar.addEventListener('click',function(e){
            if(!player || !player.duration) return;
            var pos = (e.offsetX/parseInt(seekBar.style.width))*player.duration;
            player.seek(pos);
        });
    }
    function play(){
      if(player) player.stop();
      player = new Player({selector:'#cnv', ffmpegPath: 'e:\\wfsroot\\ffmpeg.exe',autoDownScale: false});
	  //var file = "e:\\wfsroot\\somebody.mp4"
	  var file = "e:\\wfsroot\\somebody_1080_prores.mov"
      player.openSrc(file);
      player.on('canplay',function(){
          seekBar.style.width = cnv.width+'px';
          player.play();
      })
      player.on('time',function(tm){
         pos.innerText = tm.toFixed(2)+'/'+player.duration;
         progressBar.style.width = tm*100/player.duration+'%';
      });
    }
    function togglePause(){
        if(player){
            if(!player.paused) player.pause();
            else player.play();
        }
    }
    function stop(){
        if(player) player.stop();
        player = null;
    }
</script>
</body>
</html>